<template>
  <div class="container mx-auto mt-10 pb-5">
    <ContentWrap title="最新政策">
      <template #subtitle>
        <div class="flex justify-center relative">
          <span class="text-sm text-index-desc">产业政策，数据新、智匹配</span>
          <div class="absolute right-0">
            <ReadMore></ReadMore>
          </div>
        </div>
      </template>
      <template #default>
        <div class="grid grid-cols-2 grid-rows-2 gap-x-12">
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="pt-6 pb-5"
            :class="index === 0 || index === 1 ? 'border-b border-solid border-[#E0E4ED]' : ''"
          >
            <div>
              <div class="text-xl text-[#4a4a4a] mb-3 font-bold">{{ item.title }}</div>
              <div class="policy-tags space-x-2 mb-3">
                <el-tag v-for="(item, index) in getTags(item)" :key="index" size="small">{{
                  item
                }}</el-tag>
              </div>
              <div class="text-index-desc text-sm mb-2 policy-desc">
                申请条件：{{ item.condition }}
              </div>
              <div class="text-index-desc text-xs mb-5">
                <div class="flex space-x-8">
                  <div>
                    <span>发布年限：</span>
                    <span>{{ item.year }}</span>
                  </div>
                  <div>
                    <span>政策有效期：</span>
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </ContentWrap>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import ContentWrap from './ContentWrap.vue'
import ReadMore from './ReadMore.vue'
import { getPolicyPageList } from '@/api/policy'
export default Vue.extend({
  components: { ContentWrap, ReadMore },
  data() {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    getTags(item) {
      const partition = item.partition
      return partition.split(/,|，/)
    },
    async fetchData() {
      const res = await getPolicyPageList({
        pageIndex: 0,
        pageSize: 4,
      })
      this.dataList = res.list
    },
  },
})
</script>

<style lang="scss" scoped>
.policy-tags {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;

  /* &::-webkit-scrollbar {
    display: none;
  } */
}
.policy-desc {
  line-height: 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
